<template>
  <div class="songSheetType-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>歌单访问</el-breadcrumb-item>
      <el-breadcrumb-item>访问歌单类型</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="echarts" ref="container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import testAx from '@/utils/testApiServer.js'
export default {
  name: "SongSheetType",
  methods: {
    async getSheetList() {
      const {data: res} = await testAx.get('/sheetType')
      this.draw(res)
    },
    draw(data) {
      const options = {
      title: {
        text: "访问歌单类型分布",
        left: "center",
      },
      tooltip: {
        trigger: "item",
        formatter: "{b}<br/>{d}%",
      },
      legend: {
        left: "center",
        top: "bottom",
      },
      label: {
        fontSize: 16
      },
      series: [
        {
          name: "Area Mode",
          type: "pie",
          radius: [50, 250],
          center: ["50%", "50%"],
          roseType: "area",
          itemStyle: {
            borderRadius: 5,
          },
          data: data,
        },
      ],
    };
    var myCharts = echarts.init(this.$refs.container);
    myCharts.setOption(options);
    }
  },
  mounted() {
    this.getSheetList()
  },
};
</script>

<style scoped>
.echarts {
  width: 1200px;
  height: 700px;
  margin: 80px auto;
}
</style>